<template>
	<div id="#box">
		<div class="fbox">
			<header>
				<p class="text01">找回密码</p>
				<p class="text02">碧桂园数管中心</p>
			</header>
			<p class="ckeckbox">
				<el-progress :text-inside="true" :stroke-width="26" :percentage="percentage" class=""></el-progress>
			</p>
			<div class="ckeckbox" v-show="first">
				<p style="padding: 20px 0px 0px 0px;">请填写您要找回的账号</p>
				<div style="margin-top: 15px;width: 400px;">
				  <el-input placeholder="请输入您的邮箱账号" v-model="input"></el-input>
				  <el-button type="primary" style="margin: 30px 0px;" @click="next">下一步</el-button>
				</div>
			</div>
			<div class="ckeckbox" v-show="second">
				<p style="padding: 20px 0px 0px 0px;">请填写您的验证码</p>
				<div style="margin-top: 15px;width: 400px;">
				  <el-input v-model="input2" placeholder="请输入验证码 "></el-input>
				  <el-button type="primary" style="margin: 30px 0px;" @click="third">下一步</el-button>
				</div>
			</div>
			<div class="ckeckbox" v-show="three">
				<p style="padding: 20px 0px 0px 0px;">请重新设置您的密码 </p>
				<div style="margin-top: 15px;width: 400px;">
				  <el-input v-model="newpassword1" placeholder="请输入新的密码" style="margin-bottom: 15px;"></el-input>
				  <el-input v-model="newpassword2" placeholder="请再次输入新的密码"></el-input>
				  <el-button type="primary" style="margin: 30px 0px;" @click="fourth">下一步</el-button>
				</div>
			</div>
			<div class="ckeckbox" v-show="four">
				<p>修改成功</p>
			</div>
		</div>			
	</div>
</template>

<script>
	export default{
		data(){
			return{
				percentage:0,
				input:'',
				input2:'',
				newpassword1:'',
				newpassword2:'',
				first:true,
				second:false,
				three:false,
				four:false
			}
		},
		methods:{
			next(){
				var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
				if(!filter.test(this.input)){
					alert('邮箱格式不正确')
				}else{
					alert('正确');
					this.percentage = 25;
					this.first = false;
					this.second = true;
				}
			},
			third(){
				this.percentage = 50;
				this.second = false;
				this.three = true;
			},
			fourth(){
				if(this.newpassword1==this.newpassword2){
					this.percentage = 75;
					this.three = false;
					this.four = true;
				}else{
					alert('两次密码不匹配');
				}
				
			}
		},
		mounted(){

		}
	}
</script>

<style scoped="scoped">
	#box{
			
	}
	header{
		width: 100vw;
		height: 30vh;
		background-image: url(../../assets/header.png);
		background-size: 100% ;
		background-repeat: no-repeat;
		background-position: 0px 0px 50px 0px;
		overflow: hidden;
	}
	.fbox{
		width: 100vw;
		height: 100vh;
	}
	.text01{
		margin: 60px 0px 20px 0px;
		text-align: center;
		color: white;
		font: "微软雅黑" ;
		font-size: 30px;
	}
	.text02{
		margin: 0px 0px 0px 0px;
		color: white;
		font: "微软雅黑" ;
		font-size: 30px;
		text-align: center;
	}
	.ckeckbox{
		margin: 0 auto;
		width: 70vw;
		padding: 20px 20px;
	}
	.el-select .el-input {
	    width: 130px;
	  }
	  .input-with-select .el-input-group__prepend {
	    background-color: #fff;
	  }
</style>